<template>
  <div class="home">
    <el-row :gutter="12">
      <el-col :span="6">
        <el-card class="i-box" shadow="hover">
        <span>剩余月卡</span>
          <i>{{data.exist_tickets}}</i>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="i-box" shadow="hover"> <span>用户总数</span> <i>{{data.all_user}}</i></el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="i-box" shadow="hover"> <span>未处理订单</span> <i>{{data.not_handle_order}}</i></el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="i-box" shadow="hover"> <span>未处理捐献单</span> <i>{{data.not_handle_donate}}</i></el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import { GetTotalInformation } from "@/api/common";

export default defineComponent({
  name: 'home',
  setup() {
    const state = reactive({
      data: {},
    })
    const methods = {
      async getTotalInfo(){
        let resp = await GetTotalInformation()
        state.data = resp.data
      },
    }
    onMounted(()=>{
      methods.getTotalInfo()
    })
    return {
      ...toRefs(state),
      ...methods,
    }
  },
})
</script>

<style lang="scss" scoped>
.home {
  color: $mainColor;
}
.i-box {
  display: block;
  width: 100%;
}
.i-box span{
  display: inline-flex;
  width: 100px;
}
.i-box i{
  display: inline-flex;
}
</style>
